<template>
  <el-drawer
    size="50%"
    v-model="dialogVisibled"
    :before-close="handleClose"
    :with-header="false"
    :close-on-click-modal="false"
    @open="handleDialogOpen"
  >
    <el-divider
      content-position="left"
      style="margin-top: 20px !important; margin-bottom: 20px !important"
      >审核信息</el-divider
    >
    <div style="margin: 5px 5px">
      <el-form
        ref="ruleFormRef"
        :model="applyModel"
        status-icon
        :rules="rules"
        label-width="auto"
      >
        <el-form-item
          v-if="approvalType === FlowNodeStateEnum.AuditDismissal"
          label="驳回节点："
          prop="RejectNodeId"
        >
          <el-select
            placeholder="请选择驳回节点"
            v-model="applyModel.RejectNodeId"
            check-strictly
            style="width: 99%;"
          >
            <el-option v-for="group in nodeList" :key="group.value" :label="group.label" :value="group.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="审核备注：" prop="ExamineRemark">
          <el-input
            v-model="applyModel.ExamineRemark"
            maxlength="300"
            :rows="5"
            placeholder="请填写审核备注"
            show-word-limit
            type="textarea"
          />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <el-button
        icon="Check"
        color="#16b777"
        plain
        size="large"
        @click="approvalConfirmClick"
        >确认{{ dialogTitle }}</el-button
      >
      <el-button icon="Close" size="large" type="danger" plain @click="handleClose"
        >取消</el-button
      >
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import { FlowApplyExamine, GetExamineNodeSelectData } from "@/api/flowApply";
import { FlowNodeStateEnum } from "@/enum/flowEnum";
import { selectOutPut } from "@/model/public/selectModel";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { computed, reactive, ref } from "vue";
const props = defineProps({
  isVisibles: { type: Boolean, required: true },
  dialogTitle: { type: String, required: true },
  flowApplyId: { type: String, required: true },
  examineNodeId: { type: String, required: true },
  approvalType: { type: Number as () => FlowNodeStateEnum, required: true },
});
const emit = defineEmits(["closeBnt", "approvalBnt"]);

//审批模型
const applyModel = ref({
  FlowApplyId: props.flowApplyId,
  ExamineNodeId: props.examineNodeId,
  RejectNodeId: "",
  ExamineState: props.approvalType,
  ExamineRemark: "",
});

//节点集合
const nodeList = ref<selectOutPut[]>([]);

//打开时加载
const handleDialogOpen = function () {
  applyModel.value.FlowApplyId = props.flowApplyId;
  applyModel.value.ExamineNodeId = props.examineNodeId;
  applyModel.value.RejectNodeId = "";
  applyModel.value.ExamineState = props.approvalType;
  applyModel.value.ExamineRemark = "";
  if (props.approvalType === FlowNodeStateEnum.AuditDismissal)
    GetExamineNodeSelectDataMsg();
  resetForm(ruleFormRef.value);
};

//获取当前节点前的所有节点--用于驳回
const GetExamineNodeSelectDataMsg = () => {
  GetExamineNodeSelectData({ flowApplyId: applyModel.value.FlowApplyId }).then(
    ({ data, code }) => {
      if (code == 200) {
        nodeList.value = data;
      }
    }
  );
};

//#region  验证规则

//注册验证
const ruleFormRef = ref<FormInstance>();
const rules = reactive<FormRules<typeof applyModel.value>>({
  RejectNodeId: [
    {
      required: true,
      message: "请选择驳回节点!",
      trigger: "change",
    },
  ],
});

//清除验证
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

//#endregion

//是否显示dialog
const dialogVisibled = computed(() => {
  return props.isVisibles;
});

//验证表单基本信息
const verifyFormBaseMsg = async (formEl: FormInstance | undefined) => {
  var isTrue = ref<boolean>();
  if (!formEl) return;
  await formEl.validate((valid) => {
    isTrue.value = valid;
  });
  return isTrue;
};

//审批事件
const approvalConfirmClick = async () => {
  const formBaseState = await verifyFormBaseMsg(ruleFormRef.value);
  if (formBaseState?.value) {
    FlowApplyExamine(applyModel.value).then(({ code }) => {
      if (code == 200) {
        emit("approvalBnt");
        ElMessage.success("审批成功");
      }
    });
  }
};

//关闭事件
const handleClose = () => {
  emit("closeBnt");
};
</script>

<style scoped></style>
